<template>
    <daohang title="购物车"></daohang>
    <van-list :finished="finished" finished-text="没有更多了" v-if="com.length != 0">
        <van-checkbox-group v-model="checks" ref="checkboxGroup">
            <van-cell-group v-for="item in com" :key="item.proid">
                <van-swipe-cell :before-close="(beforeClose as Interceptor)" :name="item.cartid">
                    <van-row>

                        <van-col span="2">
                            <van-checkbox @click="check(item.flag, item.cartid)" class="aaa"
                                :name="item.cartid"></van-checkbox>
                        </van-col>
                        <van-col span="22">
                            <van-card :price="item.originprice + '.00'" desc="描述信息" :title="item.proname"
                                :thumb="item.img1">
                                <template #num>
                                    <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
                                        @change="changes(item.cartid, item.num)" />
                                </template>
                            </van-card>

                        </van-col>


                    </van-row>
                    <template #right>
                        <van-button square type="danger" text="删除" class="btn" />
                    </template>
                </van-swipe-cell>
            </van-cell-group>
        </van-checkbox-group>
    </van-list>
    <h1 class="h1" v-else>购物车为空</h1>


    <van-submit-bar :price="num" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="buer" @click="all">全选</van-checkbox>
    </van-submit-bar>

</template>

<script setup lang="ts">
import { showConfirmDialog } from 'vant';


import { onMounted, ref, computed } from 'vue';

import daohang from '@/components/daohang.vue';

import { gouwuche, checked, allchecked, upgouwuche, removechecked } from '../api/index';
import type { Interceptor } from 'vant/lib/utils';

const finished = ref(true);

type arr = {
    flag: boolean
    originprice: number
    cartid: string
    num: number
    proid: string
    proname: string
    img1: string
}

const com = ref([] as arr[])

const buer = ref()



const checks = ref([])

const checkboxGroup = ref();

const check = async (flag: boolean, cartid: string) => {
    console.log(checks.value);

    const a = !flag
    const res = await checked({
        cartid,
        flag: a
    })


    const id = localStorage.getItem('userid') as string
    const result = await gouwuche(id);
    com.value = result.data.data
    buer.value = result.data.data.every((item: { flag: boolean; }) => item.flag === true)

}

const changes = async (cartid: string, num: number) => {
    const res = await upgouwuche({
        cartid,
        num
    })

}

const all = async () => {
    const userid = localStorage.getItem('userid') as string

    const res = await allchecked({
        userid: userid,
        type: buer.value
    })
    checkboxGroup.value.toggleAll(buer.value);

    const id = localStorage.getItem('userid') as string
    const result = await gouwuche(id);
    com.value = result.data.data
    buer.value = result.data.data.every((item: { flag: boolean; }) => item.flag === true)

}


const onSubmit = () => {

}
const beforeClose = ({ position, name }:any) => {
    switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
            return true;
        case 'right':
            return new Promise(() => {
                showConfirmDialog({
                    title: '确定删除吗？',
                }).then(async () => {
                    console.log(name);
                    const res = await removechecked(name)
                    const id = localStorage.getItem('userid') as string
                    const result = await gouwuche(id);
                    if (result.data.data == undefined) {
                        com.value = []
                    } else {
                        com.value = result.data.data
                    }


                });
            });
    }
};


const num = computed(() => {
    let total = 0
    for (let i = 0; i < com.value.length; i++) {
        if (com.value[i].flag) {
            total += com.value[i].originprice * com.value[i].num * 100
        }
    }
    return total
})


onMounted(async () => {
    const id = localStorage.getItem('userid') as string
    // console.log(id);

    const result = await gouwuche(id);

    // console.log(result.data.data);

    if (result.data.data == undefined) {
        com.value = []
    } else {
        com.value = result.data.data
    }

    console.log(result.data);

    console.log(com.value);



    for (let i = 0; i < com.value.length; i++) {
        if (com.value[i].flag) {
            checks.value.push(com.value[i].cartid as never)
        }
    }
    // console.log(checks.value);

    buer.value = com.value.every((item: { flag: boolean; }) => item.flag === true)
})

</script>

<style scoped>
.left {
    width: 10%;
}

.van-row {
    align-items: center
}

.aaa {
    margin-left: 10px;
}

.van-cell-group {
    background: #f7f8fa;
}

.btn {
    height: 100%;
}

.h1 {
    text-align: center;
    margin-top: 20px;
}
</style>


